<template>
  <div class="home-container">
    <div class="home-container__l">
      <banner :linkArr="linkArr" :imgArr="imgArr" style="margin-top: 40px"></banner>
      <card-container style="margin-top: 40px" title="热门项目"  more="查看更多" @listenCardConMore="changeRoute('/project?type=all')">
        <project-card v-for="(val,index) in projectList" :key="val.projectId" :info="val"></project-card>
      </card-container>
      <card-container style="margin-top: 16px" title="热门博客" @listenCardConMore="changeRoute('/blog?type=all')">
        <project-card v-for="(val,index) in blogList" :key="val.blogId" :info="val"></project-card>
        <pagination ref="pagination" :paginationState="paginationState" :type="2" key="container5" style="margin:20px auto;" :pages="pages"></pagination>
      </card-container>
    </div>
    <div class="home-container__r">
      <card-container style="margin-top: 40px" title="最新资讯"  more="更多" @listenCardConMore="changeRoute('/news')">
        <div @click.stop="changeRoute2('/news/detail/'+val.contentId)"  class="information-wrap" v-for="(val,index) in newsList" :key="val.contentId">
          <p class="information-time">{{dateConvert(val.createTime)}}</p>
          <p class="information-content">{{val.title}}</p>
        </div>
      </card-container>
      <hot-topic-list style="margin-top: 16px"></hot-topic-list>
      <card-container style="margin-top: 16px;padding-bottom:15px"  title="社区精英"  >
        <user-card    style="padding-bottom: 2px;padding-top: 2px" v-for="(val,index) in elitesList" :key="val.userId"  :info="val"></user-card>
      </card-container>

      <card-container style="margin-top: 16px"  title="热门问答"  more="更多" @listenCardConMore="changeRoute('/answer?type=all')">
        <div  @click="changeRoute2('/answer/detail/'+val.questionId)"  class="topic-content__c" v-for="(val,index) in answerList" :key="val.questionId" >
          <p>{{val.questionTitle}}</p>
          <h6>{{val.replyNumber}}</h6>
        </div>
      </card-container>
    </div>

  </div>
</template>

<script>


  import Banner from '../components/pc/banner';
  import CardContainer from '../components/pc/cardContainer';
  import ProjectCard from '../components/pc/projectCard';
  import config from '../action/config';
  import UserCard from '../components/pc/userCard2'
  import {dateConvert} from '../action/utils/dataConvert'
  import HotTopicList from '../components/pc/hotSearchTopicCard'
  import Pagination from '../components/pc/pagination';

  export default {


    async asyncData ({ $axios }) {


      let hotBlogList = await  $axios.$get(config.api.get.Blog.hotList, {params:{
          page:1,
          size:20
        }})

      let projectList = await  $axios.$get(config.api.get.Project.hotList,{
        params:{
          page:1,
          size:5,
        }
      });

      let newsList = await $axios.$get(config.api.get.Content.list + '/13/contents',
        {
          params: {
            page: 1,
            size: 5,
            type: 1}
        })

      let bannerList = await   $axios.$get(config.api.get.Content.list + '/12/contents',
        {
          params: {
            page: 1,
            size: 5,
            type: 0
          }
        })

      return {
        blogList:hotBlogList.data.dataList,
        projectList:projectList.data.dataList,
        bannerList:bannerList.data.dataList,
        newsList:newsList.data.dataList}
    },
    data(){
      return{
        imgArr:[],
        linkArr:[],
        elitesList:[],
        answerList:[],
        topicList:[],
        newsList:[],
        blogList:[],
        paginationState:'over',
        pages:1,
      }
    },
    created() {
      this.dataGetHotBloggersList();
      this.dataGetHotAnswerList();
      this.dataGetBanner();
    },

    components:{
      CardContainer,Banner,ProjectCard,UserCard,HotTopicList,Pagination
    },
    methods:{

      changeRoute(r){
        return this.$router.push(r);
      },
      changeRoute2(r){
        let routeUrl = this.$router.resolve({
          path: r
        });
        window.open(routeUrl.href,'_blank')
      },
      dateConvert(time) {
        return dateConvert(time);
      },

      restartPagination(){
        this.postList = [];
        this.pages = 1;

        if(process.browser){
          this.$refs.pagination.setCurrentPage(1)
        }
      },

      dataGetBlogList(currentPage){
        this.paginationState = 'loading';
        let params={
          page:currentPage,
          size:20
        };
        this.$axios.$get(config.api.get.Blog.hotList, {params:params})
          .then((response)=>{
            this.paginationState = 'over';
            this.pages  = response.data.totalPage;
            if(currentPage===1){
              this.blogList = response.data.dataList;
              this.pages  = response.data.totalPage;
            }else{
              let list = response.data.dataList;
              for(let i = 0;i<list.length;i++){
                this.blogList.push(list[i]);
              }
            }
          })
      },

      changePage(currentPage){
        this.dataGetBlogList(currentPage)
      },

      dataGetBanner(){  //内容类型-0:幻灯，1:普通文章，3：广告
          let dataList = this.bannerList;
           dataList.map((val,index)=>{
            this.imgArr.push(
              val.pic1
            );
             this.linkArr.push(
               val.link
             )
          })

      },

      dataGetHotBloggersList() {
        let params={
          page: 1,
          size: 12
        };
        this.$axios.$get(config.api.get.User.elites,{params:params})
          .then((response)=>{
            this.elitesList = response.data.dataList;
          });
      },

      dataGetHotAnswerList() {
        let params={
          page: 1,
          size: 10
        };
        this.$axios.$get(config.api.get.Question.hotList,{params:params})
          .then((response)=>{
            this.answerList = response.data.dataList;
          });
      },

    },
    mounted(){
    }
  }
</script>

<style lang="scss" scoped>
  div{
    position: relative;
  }
  .home-container{
    width: $pageWidth;
    margin:0 auto;
    padding-bottom: 32*$length;
    @extend %flex-row-spb;
    align-items: flex-start;
    .home-container__l{
      overflow:hidden;
      width:938*$length;
    }
    .home-container__r{
      overflow:hidden;
      width:302*$length;
      .information-wrap {
        padding:12*$length 16*$length 0;
        box-sizing: border-box;
        width:302*$length;
        &:hover{
          .information-time{
            color:rgba(0,170,230,.6);
          }
          .information-content{
            color:rgba(0,170,230,1);

          }
        }
        .information-time {
          @extend %cursorPointer;
          @include fontStyle(12, 16, 500, #CCC, left);
          @extend %animate-transition;

          @extend %nowrap;
        }
        .information-content {
          width: 100%;
          overflow: hidden;
          margin-top: 5*$length;
          @extend %nowrap;
          @extend %cursorPointer;
          @extend %animate-transition;
          @include fontStyle(14, 19, 500, #333, left);

        }
      }
    }
  }
</style>
